<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>

	<body>
		<style>
			ul {
				width: 300px;
				height: 400px;
				background: #f0f0f0;
				list-style: none;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 5px;
			}
			
			ul li {
				width: 90px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background: red;
				border-radius: 10px;
			}
			
			ul:after {
				content: '';
				width: 90px;
			}
		</style>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</body>

</html>